<template>
  <div class="person">
    <h2>需求：水温达到60度，或水温到达80cm时，给服务器发送请求</h2>
    <h2>当前水温为：{{ temp }}℃</h2>
    <h2>当前水位为：{{ height }}cm</h2>
    <button @click="changeTemp">水温+10</button>
    <button @click="changeHeight">水位+10</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import { ref,watch,watchEffect } from 'vue';
  //数据
  let temp = ref(10);
  let height = ref(0);
  //方法
  function changeTemp() {
    temp.value += 10;
  }
  function changeHeight() {
    height.value += 10;
  }
  //监视
  watch([temp,height],(Value)=>{
    //从value中获取最新数据
      let [newTemp,newHeight] = Value;
      console.log(Value);
      if(newTemp >= 60 || newHeight >= 80) {
        alert('超出限制');
      } 
    }
  )
</script>
<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
  li {
    font-size: 20px;
  }
</style>